body,html{
	width: 100%;
	height: 100%;
}
body{
	background: url(../img/1.jpg) no-repeat 98% 100%,url(../img/2.jpg)no-repeat 5% 0%;
	overflow: hidden;
}
nav{
	height: 50px;
	width: 100%;
	background-color: white;
}
main{
	overflow: hidden;
	width: 80%;
	height:90%;
	background:url(../img/3.jpg) no-repeat;
	background-size: 100% 100%;
	margin: 0 auto;
}
ul{
	list-style: none;
	padding: 0 20px ;
}
ul li{
	float: left;
	font-size: 20px;
	line-height: 50px;
	margin-left: 100px;
}
.show1{
	width: 100%;
	height: 15%;
	background-image:linear-gradient(to right,yellow,orange,red) ;
}
.show2{
	margin-top: 2%;
	width: 100%;
	height: 15%;
	background-image:repeating-linear-gradient(135deg,transparent 3px,
		transparent 10px,red 10px,red 20px) ;
}
.show3{
	margin-top: 2%;
	width: 100%;
	height: 50%;
	/*background-color: pink;*/
}
.eg1,.eg2,.eg3,.eg4{
	margin-top: -15px;
	margin-left: 10%;
	line-height: 100px;
	float: left;
	text-align: center;
}
.eg1,.eg3{
	border-radius: 100%;
	height: 100px;
	width: 100px;
	background-image:radial-gradient(green,yellow,red);
}
.eg2{
	border-radius: 100%;
	height: 100px;
	width: 100px;
	background-image:repeating-radial-gradient(
		circle,
		transparent 1px,
		transparent 3px,
		#A9a9a9 3px ,
		#A9a9a9 9px);
}
.eg4{
	border-radius: 100%;
	height: 100px;
	width: 100px;
	background-image:repeating-radial-gradient(
		circle,
		transparent 1px,
		transparent 3px,
		red 3px ,
		red 9px);
}
.but{
	width: 180px;
	height: 70px;
	border: 1px solid white;
	color: white;
	line-height: 70px;
	text-align: center;
	font-size: 30px;
	border-radius: 10px;
	margin: 250px auto;
}
.long{
	width: 100%;
	height:35%;
	background-color: white;
	margin: -230px auto;
}